<template>
	<div>
		<el-form :model="form" label-width="120px">
			<el-row>
				<div style="height: 100px;line-height: 50px; color: red;font-weight: bold;"><span
						style="">企业：营业执照上的名称一致。个体工商户：营业执照没有商家名称或者名称为“”或者“**”，则商户名称应填
						“个体户XXX”（XXX为营业执照上经营者姓名）。小微商户：商户名称应填 “商户_XXX”（XXX为小微商户身份证上的姓名）</span></div>
				<el-col :span="8">
					<el-form-item label="商户号:">
						<el-input v-model="form.usercode" placeholder="百分比：0.3 表示 0.003 固定金额0.5元，填写50"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="商户名称:">
						<el-input v-model="form.cust_name" placeholder=""></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="联系人证件类:">
						<el-select v-model="form.contact_cert_type" placeholder="请选择">
							<el-option label="公民身份证正面	" value="00"></el-option>
							<el-option label="中国护照	" value="01"></el-option>
							<el-option label="军人身份证	" value="02"></el-option>
							<el-option label="警官证	" value="03"></el-option>
							<el-option label="户口簿	" value="04"></el-option>
							<el-option label="临时身份证" value="05"></el-option>
							<el-option label="外国护照" value="06"></el-option>
							<el-option label="港澳通行证	" value="07"></el-option>
							<el-option label="台胞通行证	" value="08"></el-option>
							<el-option label="离休干部荣誉证" value="09"></el-option>
							<el-option label="军官退休证" value="10"></el-option>
							<el-option label="文职干部退休证" value="11"></el-option>
							<el-option label="军事院校学员证" value="12"></el-option>
							<el-option label="武装警察身份证" value="13"></el-option>
							<el-option label="军官证" value="14"></el-option>
							<el-option label="文职干部证" value="15"></el-option>
							<el-option label="军人士兵证" value="16"></el-option>
							<el-option label="武警士兵证" value="17"></el-option>
							<el-option label="其他证件" value="18"></el-option>
							<el-option label="营业执照" value="19"></el-option>
							<el-option label="税务登记证" value="20"></el-option>
							<el-option label="公民身份证反面" value="30"></el-option>
							<el-option label="客户协议" value="31"></el-option>
							<el-option label="授权书" value="32"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="6">
					<el-form-item label="联系人证件号:">
						<el-input v-model="form.contact_cert_no" placeholder="注:必须与商户认证申请时的联系人身份证号一致"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="证件开始日期:">
						<el-input v-model="form.legal_cert_initial" placeholder="法人证件日期示例:yyyyMMdd"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="证件结束日期:">
						<el-input v-model="form.legal_cert_expire" placeholder="注:长期有效[29991231]"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<div style="height: 50px;line-height: 50px; color: red;font-weight: bold;"><span
						style="">客户类型为企业、个体时必填</span></div>
				<el-col :span="6">
					<el-form-item label="执照开始日期:">
						<el-input v-model="form.bus_license_initial" placeholder="营业执照日期示例:yyyyMMdd"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="执照结束日期:">
						<el-input v-model="form.bus_license_expire" placeholder="注:长期有效[29991231]"></el-input>
					</el-form-item>
				</el-col>
			</el-row>


			<el-row>
			<div style="font-weight: bold; margin-bottom: 20px;">
				<span style="">以下资料客户类型为<span style="color: red;font-size: 30px;">小微商户</span>时必填</span>
				<p style="color: red;"> <span style="font-size: 30px;">重要：</span>图片必须在<span style="font-size: 30px;">120s</span>内上传完成，否则之前上传的图片会失效，导致需要重现上传，认证需要上传<span style="color: red;font-size: 30px;">2张</span>图片</p>
				<p style="color: red;">注：小微商户认证时，填写完资料以后最后上传图片，图片上传完成以后再点击提交</p>
				<p style="color: red;">注：为确保申请响应速度，建议图片大小在1M内.</p>
				<p>图片上传标准：</p>
				<p>门头照：【门店场所】:提交门店门口照片，要求招牌清晰可见。【流动经营/便民服务】：提交经营/服务现场照片。【线上商品/服务交易】：提交店铺首页截图</p>
				<p>经营场所图:【门店场所】：提交店内环境照片。【流动经营/便民服务】：可提交另一张经营/服务现场照片。【线上商品/服务交易】：提交店铺管理后台截图。</p>
				
				<p>经营类型对应门店场所填写标准：</p>
				<p>门店场所：填写门店名称。流动经营/便民服务：填写经营/服务名称。</p>
				<p>线上商品/服务交易：填写线上店铺名称。示例值：杭州小笼包，客户类型为小微商户时必填</p>
				
			</div>
				<el-col :span="24">
					<div class="box-img">
						<el-form-item label="图片类型:">
							<el-select v-model="info.picType" placeholder="请选择">
								<el-option label="门头照" value="34"></el-option>
								<el-option label="经营场所图" value="50"></el-option>
							</el-select>
						</el-form-item>
						<div class="img-box">
							<el-upload class="avatar-uploader" action="https://openpay.duolaibei.com/admin/upload/upload"
								:show-file-list="false" :on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</div>
						<el-form-item class="butt-img">
							<el-button type="primary" @click="upimg">图片上传</el-button>
						</el-form-item>
					</div>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="8">
					<el-form-item label="小微经营类型:">
						<el-select v-model="form.store_type" placeholder="请选择">
							<el-option label="门店场所" value="00"></el-option>
							<el-option label="流动经营/便民服务" value="01"></el-option>
							<el-option label="线上商品/服务交易" value="02"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="门店场所:">
						<el-input v-model="form.store_name" placeholder="示例值：杭州小笼包"></el-input>
					</el-form-item>
				</el-col>
			</el-row>


			<el-form-item class="butt">
				<!-- <el-button type="primary" @click="onSubmit">提交</el-button> -->
				<el-button type="primary" @click="onSubmit">提交</el-button>
			</el-form-item>

		</el-form>
	</div>
</template>

<script>
	export default {
		props: {
			id: Number,
			mch_id :String,
		},
		data() {
			return {
				info: {
					'picType': '34',
					'path': '',
				},
				imageUrl: '',
				form: {
					'usercode': this.mch_id,
					'cust_name': '',
					'contact_cert_type': '00',
					'contact_cert_no': '',
					'legal_cert_initial': '',
					'legal_cert_expire': '',
					'bus_license_initial': '',
					'bus_license_expire': '',
					'store_type': '00',
					'store_name': '',
				},
			}
		},
		methods: {
			upimg() {
				if (this.info.path == '') {
					this.$message.error('图片不能为空！');
				}
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.id,
						type: 5,
						genre: 6,
						picType: this.info.picType,
						path: this.info.path,
					},
					success(res) {
						console.log(res);
						if (res.data.code == 200) {
							that.$message.success('上传成功');
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			handleAvatarSuccess(res, file) {
				if (res.code == 200) {
					this.imageUrl = res.content.path;
					this.info.path = res.content.path;
				}
			},
			beforeAvatarUpload(file) {
				//const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},

			onSubmit() {
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.id,
						type: 5,
						genre: 7,
						form: this.form
					},
					success(res) {
						if (res.data.code == '200') {
							that.$message.success(res.data.msg)
						} else {
							that.$message.error(res.data.msg)
						}
					}
				});
			}
		},
		created() {
		},
	}
</script>

<style>
	.butt {
		text-align: center;
		/* margin-top: 10px; */
		margin: 40px;
	}

	.box-img {
		display: flex;
	}
	
	.img-box{
		margin-left: 40px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		border: 1px dashed #d9d9d9;
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
